﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="set_map.aspx.cs" Inherits="DTcms.Web.admin.dialog.set_map" %>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>传递事件参数</title>
<link href="../skin/default/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="../../scripts/jquery/jquery-1.11.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/common.js"></script>
    <script type="text/javascript">
        var api = top.dialog.get(window); //获取父窗体对象

        //页面加载完成执行
        $(function () {
            //设置按钮及事件
            api.button([{
                value: '确定',
                callback: function () {
                    var str = $(api.data).val($("#txtZuobiao").val());
                    api.close().remove();
                },
                autofocus: true
            }, {
                value: '取消',
                callback: function () { }
            }]);
        });
</script>
<style type="text/css">
*{
    margin:0px;
    padding:0px;
}
body, button, input, select, textarea {
    font: 12px/16px Verdana, Helvetica, Arial, sans-serif;
}
p{
    width:603px;
    padding-top:3px;
    overflow:hidden;
}
#container{
	min-width:600px;
	min-height:450px;
}
.inpt { border:solid 1px #eee; line-height:20px; padding:3px 0; text-indent:5px; width:170px; }
.sbtn {border:solid 1px #eee; line-height:20px; padding:3px 10px;}
</style>
<script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
<script>
    function init() {
        var map = new qq.maps.Map(document.getElementById("container"), {
            center: new qq.maps.LatLng(35.759189553287015, 119.21419143676758),
            zoom: 13
        });
        //添加监听事件   获取鼠标单击事件
        qq.maps.event.addListener(map, 'click', function (event) {
            var marker = new qq.maps.Marker({
                position: event.latLng,
                map: map
            });
            qq.maps.event.addListener(map, 'click', function (event) {
                marker.setMap(null);
            });
            $("#txtZuobiao").val(event.latLng);
        });
        //调用地址解析类
        geocoder = new qq.maps.Geocoder({
            complete: function (result) {
                map.setCenter(result.detail.location);
            }
        });
    }
    function codeAddress() {
        var address = document.getElementById("address").value;
        //通过getLocation();方法获取位置信息值
        geocoder.getLocation(address);
    }
</script>
</head>
<body onload="init()">
<form id="form1" runat="server">
<div style="margin:0; padding:10px 0;">当前坐标：<input type="text" class="inpt" id="txtZuobiao" name="txtZuobiao" readonly="true" />&nbsp;&nbsp;&nbsp;&nbsp;搜索地理位置：<input id="address" type="text" class="inpt"/><input type="button" value="搜索" class="sbtn" onclick="codeAddress()" />
</div>
<div id="container"></div>
<p>给地图绑定了点击事件，当点击地图时，会在点击位置显示Marker。</p>
        </form>
</body>
</html>
